<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<div th:fragment="common">
    <script src="js/fileUpload.js"></script>
    <script src="js/chatJs.js"></script>
    <script src="js/functionWithIndex.js"></script>
    <script src="js/indexCommon.js"></script>
    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>
    <script>
        const name = $("#loginedUserName").text();
        console.log("name --> " + name);
        var app = new Vue({
            el: "#wholeContent",
            data: {
                messages: [], // 好友列表
                friendRequests: [], // 请求消息
                chatMessages: [], // 聊天消息
                notificationMessages: [], // 通知消息
            },
            methods: {
                initFriendList: function () {
                    console.log("init..............");
                    this.messages = [];
                    var m = this;
                    axios.get("friend/findAll/" + name)
                        .then(function (response) {
                            for (let i = 0; i < response.data.length; i++) {
                                console.log(response.data[i]);
                                m.messages.push(response.data[i]);
                            }

                        })
                        .catch(function (error) {
                            console.log(error);
                        })
                },
                initRequests: function () {
                    var temp = this;
                    axios.get("request/message/byReceive/" + name)
                        .then(function (response) {
                            console.log(response.data);
                            for (let i = 0; i < response.data.length; i++) {
                                console.log(response.data[i]);
                                var data = JSON.parse(response.data[i]);
                                let number;
                                let html;
                                switch (data.flag) {
                                    case "1": // flag位为1，表示是发送添加好友请求
                                        number = $("#request_number").text();
                                        // 更新请求数量
                                        $("#request_number").text(parseInt(number) + 1);
                                        html = document.getElementById("friend-requests").innerHTML;
                                        temp.friendRequests.push(data);
                                        break;
                                    case "2": // flag位为2，表示是同意添加好友请求
                                        // 表示接受好友添加请求，将消息显示在通知里
                                        number = $("#notification-number").text();
                                        $("#notification-number").text(parseInt(number) + 1);
                                        temp.notificationMessages.push(data);
                                        playAudio();
                                        break;
                                    case "3": // flag位为3，表示拒绝添加好友请求
                                        number = $("#notification-number").text();
                                        $("#notification-number").text(parseInt(number) + 1);
                                        html = document.getElementById("notification-list").innerHTML;
                                        temp.notificationMessages.push(data);
                                        playAudio();
                                        break;
                                    case "4":
                                        // 表示聊天信息
                                        console.log("接到的消息是：----> " + data.content);
                                        console.log("data.A :" + data.A);
                                        // 更改消息通知的数量
                                        number = $("#chat-number").text();
                                        $("#chat-number").text(parseInt(number) + 1);
                                        temp.chatMessages.push(data);
                                        playAudio();
                                        break;
                                    default:
                                        break;
                                }

                            }
                        })
                        .catch(function (error) {
                            console.log(error);
                        })
                },
            },
            created: function () {
                this.initFriendList();
                this.initRequests();
                window.initFriendList = this.initFriendList;
            },
        });
    </script>
</div>
</body>
</html>